<template>
  <div>
    <div class="history-header">
      <div class="left">
        <span v-for="(item,index) in headerList" :key="item.id">
          <p :class="curentIndex===index?  'active-p' :''" @click.stop="checkTitle(index)">{{item.title}}</p>
        </span>

      </div>

    </div>
      <div class="fa-list">
    <NewItem v-for="data in commentList" :key="data.pid" :data="data" :textState="true"></NewItem>
    </div>
    <div class="box">
       <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import scroll from '@/util/scroll'
import { mapState } from 'vuex'
import Loading from '@/components/utilView/loadingView.vue'
import NewItem from '@/components/news/newItem.vue'

export default {
  components: {
    Loading,
    NewItem
  },
  data () {
    return {

      headerList: [
        {
          id: 1,
          title: '收到的评论'
        },
        {
          id: 2,
          title: '关注人评论'
        },
        {
          id: 3,
          title: '我发的评论'
        }
      ], // 头部列表
      curentIndex: 0, // 头部下标
      commentList: [], // 收到的评论的数据
      page: 1, // 页码
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示

    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    // 获取评论数据
    http.newcomment(this.user.uid, this.page).then(res => {
      this.commentList = res.data.commentlist
      if (res.data.commentlist.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
        console.log('数据不足')
      }
      this.page++
      // console.log(res.data)
    })
  },

  computed: {
    ...mapState(['user'])
  },
  methods: {

    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值
      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            // console.log('请求全部1')
            if (this.curentIndex === 0) {
              // console.log('请求全部2')
              http.newcomment(this.user.uid, this.page).then((res) => {
                // console.log(res.data.commentlist)

                this.commentList = [...this.commentList, ...res.data.commentlist]
                // 隐藏加载更多提示
                this.loadShow = false
                this.loading = false
                this.isRequest = false
                // 判断是否还有足够数据
                if (res.data.commentlist.length < 10) {
                  this.noMore = true
                  // 显示没有更多数据
                  this.loadShow = true
                  this.noMoreShow = true
                }
                // 增加一页
                this.page++
              })
            } else if (this.curentIndex === 1) {
              // console.log('请求关注人')
              http.followcomment(this.user.uid, this.page).then((res) => {
                this.commentList = [...this.commentList, ...res.data.commentlist]
                // console.log(this.commentlist)
                // 隐藏加载更多提示
                this.loadShow = false
                this.loading = false
                this.isRequest = false
                // 判断是否还有足够数据
                if (res.data.commentlist.length < 10) {
                  this.noMore = true
                  // 显示没有更多数据
                  this.loadShow = true
                  this.noMoreShow = true
                }
                // 增加一页
                this.page++
              })
            } else if (this.curentIndex === 2) {
              // console.log('请求我自己')
              http.mycomment(this.user.uid, this.page).then((res) => {
                this.commentList = [...this.commentList, ...res.data.mycommentlist]
                // console.log(this.commentlist)
                // 隐藏加载更多提示
                this.loadShow = false
                this.loading = false
                this.isRequest = false
                // 判断是否还有足够数据
                if (res.data.mycommentlist.length < 10) {
                  this.noMore = true
                  // 显示没有更多数据
                  this.loadShow = true
                  this.noMoreShow = true
                }
                // 增加一页
                this.page++
              })
            }
          }
        }
      }
    },
    // 切换评论内容
    checkTitle (index) {
      this.curentIndex = index
      if (index === 0) {
        this.page = 1
        http.newcomment(this.user.uid, this.page).then(res => {
          this.commentList = res.data.commentlist
          if (res.data.commentlist.length < 10) {
            this.noMore = true
            // 显示没有更多数据
            this.loadShow = true
            this.noMoreShow = true
            // console.log('数据不足')
          }
          this.page++
        })
      } else if (index === 1) {
        this.page = 1
        http.followcomment(this.user.uid, this.page).then(res => {
          this.commentList = res.data.commentlist
          if (res.data.commentlist.length < 10) {
            this.noMore = true
            // 显示没有更多数据
            this.loadShow = true
            this.noMoreShow = true
            // console.log('数据不足')
          }
          this.page++
        })
      } else if (index === 2) {
        this.page = 1
        http.mycomment(this.user.uid, this.page).then(res => {
          this.commentList = res.data.mycommentlist
          if (res.data.mycommentlist.length < 10) {
            this.noMore = true
            // 显示没有更多数据
            this.loadShow = true
            this.noMoreShow = true
            // console.log('数据不足')
          }
          this.page++
          // console.log(res.data)
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>

.history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 6px 0;
    justify-content: space-between;
    border-radius: 5px;
    margin-bottom: 10px;
    .left {
      color: #666;
      span {
        cursor: pointer;
        padding: 0 10px;
        width: 90px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        .active-p {
          font-weight: 700;
          color: #f60;
        }
        p {

          &:hover {
            color: #f60;
            border-radius: 15px;
            background: rgba(255, 102, 0, 0.2);
          }
        }
      }
      .active {
        color: #f60;
        font-weight: 700;
      }
    }

  }
  @media screen and (max-width:540px) {
    .history-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    display: flex;
    background: white;
    padding: 6px 0;
    justify-content: space-between;
    border-radius: 5px;
    margin-bottom: 10px;
    .left {
      color: #666;
       width: 100%;
      display: flex;
      justify-content: space-around;
      span {
        cursor: pointer;
        padding: 0 10px;
        width: 90px;
        display: inline-block;
        padding: 0 5px;
        text-align: center;
        .active-p {
          font-weight: 700;
          color: #f60;
        }
        p {
          font-size: .3rem;
          &:hover {
            color: #f60;

            background: rgba(255, 255, 255);
          }
        }
      }
      .active {
        color: #f60;
        font-weight: 700;
      }
    }

  }
  }
</style>
